const ScaleStage = (props: any) => {
    return (
        <div className="inline-flex items-center">
            <input
                type="text"
                className="p-0.5 w-12 rounded-sm sm:text-sm text-white bg-[#000c18] border-none"
            />

            <div className="relative">
                <div className="inline-flex items-center overflow-hidden rounded-md bg-gray-700">
                    <button className="h-full p-1 text-gray-200 hover:bg-gray-400">
                        <svg
                            xmlns="http://www.w3.org/2000/svg"
                            className="h-4 w-4"
                            viewBox="0 0 20 20"
                            fill="currentColor"
                        >
                            <path
                                fillRule="evenodd"
                                d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
                                clipRule="evenodd"
                            />
                        </svg>
                    </button>
                </div>

                <div
                    className="absolute end-0 z-10 mt-2 w-56 rounded-md border border-gray-100 bg-white shadow-lg hidden"
                    role="menu"
                >
                    <div className="p-2">
                        <a
                            href="#"
                            className="block rounded-lg px-4 py-2 text-sm text-gray-500 hover:bg-gray-50 hover:text-gray-700"
                            role="menuitem"
                        >
                            View on Storefront
                        </a>

                        <a
                            href="#"
                            className="block rounded-lg px-4 py-2 text-sm text-gray-500 hover:bg-gray-50 hover:text-gray-700"
                            role="menuitem"
                        >
                            View Warehouse Info
                        </a>

                        <a
                            href="#"
                            className="block rounded-lg px-4 py-2 text-sm text-gray-500 hover:bg-gray-50 hover:text-gray-700"
                            role="menuitem"
                        >
                            Duplicate Product
                        </a>

                        <a
                            href="#"
                            className="block rounded-lg px-4 py-2 text-sm text-gray-500 hover:bg-gray-50 hover:text-gray-700"
                            role="menuitem"
                        >
                            Unpublish Product
                        </a>

                    </div>
                </div>
            </div>
        </div>
    );
};

export { ScaleStage }